<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <style>
        .el-tree{

        }
        .el-table-add-row {
            margin-top: 10px;
            width: 100%;
            height: 34px;
            border: 1px dashed #c1c1cd;
            border-radius: 3px;
            cursor: pointer;
            justify-content: center;
            display: flex;
            line-height: 34px;
        }</style>
</head>

<body>
<div id="app">
    <div class="page-title">产量输入</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree ref="devTree" v-on:click-node="onTreeNode" :tabsign="'z'" :energy="0" ></dev-tree>
            </el-col>
            <el-col span="20">
                <el-form :inline="true" style="margin-top: 10px">
                    <el-form-item label="">
                        <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="right">
                        <el-date-picker  :type="dateMod" v-model="day" :value-format="dateFormat" @change="HandleChange" placeholder="日期" style="width: 150px;"></el-date-picker>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
                <el-table size="mini" :data="master_user.data" border style="width: 100%"    highlight-current-row row-key="ZoneID">
                    <el-table-column prop="zoneName" label="区域名称" width="150" align="center">

                    </el-table-column>
                    <el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title"  align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isSet">
                                <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
                                </el-input>
                            </span>
                            <span v-else>{{scope.row[v.field]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="110" align="center" fixed="right">
                        <template slot-scope="scope">
                            <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
                                {{scope.row.isSet?'保存':"编辑"}}
                            </span>
                            <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="resetQuot(scope.row.ZoneID)">
                                清空
                            </span>
                            <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                取消
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>

        </el-row>
    </div>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    //主要内容
    var app = new Vue({
        el: "#app",
        data: {
            master_user: {
                sel: null,//选中行
                columns: [
                ],
                data: [],
            },
            proNo:'',
            value3:true,
            dateFormat:'yyyy-MM',
            dateMod:'month',
            day:'',
            zoneType:'',
            tooltip:false,
        },
        methods: {
            onTreeNode(data){
                if (data.id.split('_')[0] =='P'){
                    this.zoneType = 0;
                    this.proNo = data.attributes.projectNo;
                    this.getZone();
                }
            },
            HandleChange:function(){
                if (this.proNo!=''){
                    this.getZone();
                }else{
                    this.$message.error('请选择项目节点')
                }
            },
            resetQuot:function(id){
                let flag =this.judgeChild(this.master_user.data,id);
                if (flag){
                    let dArr = this.day.split('-');
                    let params = {
                        ent_year:dArr[0]||0,
                        ent_month:dArr[1]||0,
                        ent_zoneid : id,
                    };
                    HttpUtil.get('MonthProduct/Delete',params).success((res)=>{
                        this.getZone();
                    });
                } else {
                    this.$message.error('请先清空子区域的定额')
                }

            },
            getZone(){
                let dArr = this.day.split('-');

                let params = {
                    ent_year:dArr[0]||0,
                    ent_month:dArr[1]||0,
                    projectNo:this.proNo,
                    ent_type:this.zoneType,
                }
                HttpUtil.get('MonthProduct/List',params).success((res)=>{
                    res.data.map(i => {
                        i.isSet=false;//给后台返回数据添加`isSet`标识
                        return i;
                    });
                    this.master_user.data=this.parseZone(res.data,null);
                })
            },
            addProduct(data){
                data.children = null;
                data['ent_year'] =  data['ent_year']||0;
                data['ent_month'] =  data['ent_month']||0;
                data['ent_type'] = this.zoneType;
                data['ent_zoneid'] = data.ZoneID;
                HttpUtil.get('MonthProduct/Add',data).success((res)=>{
                    this.getZone();
                })
            },
            extend(target, source) {
                for (var obj in source) {
                    target[obj] = source[obj];
                }
                return target;
            },
            //修改
            pwdChange(row, index, cg) {
                for (let i of app.master_user.data) {
                    if (i.isSet && i.ZoneID != row.ZoneID) {
                        app.$message.warning("请先保存当前编辑项");
                        return false;
                    }
                }
                //是否是取消操作
                if (!cg) {
                    if (!app.master_user.sel.ZoneID) app.master_user.data.splice(index, 1);
                    return row.isSet = !row.isSet;
                }
                //提交数据
                if (row.isSet) {
                    //项目是模拟请求操作  自己修改下
                    let data = JSON.parse(JSON.stringify(app.master_user.sel));
                    for (let k in data) row[k] = data[k];
                    this.$set(this.master_user.data,index,row);
                    this.master_user.data.splice(1,this.master_user.data.length);
                    let flag = true;
                    if (data.zonepid!=null){
                        flag= this.judgeSum(this.master_user.data,data.zonepid);
                    }
                    if (flag){
                        this.addProduct(data);
                    }else {
                        app.$message({
                            type: 'warning',
                            message: "子区域产量总和不能大于父节点产量"
                        });

                    }
                    //然后这边重新读取表格数据
                    row.isSet = false;

                } else {
                    app.master_user.sel = JSON.parse(JSON.stringify(row));
                    row = this.extend(row,this.master_user.sel);
                    row.isSet = true;
                }
            },
            //递归成树形数据
            parseZone(data,pid) {

                const result = []
                let temp = []
                for (let i = 0; i < data.length; i++) {
                    if (data[i].zonepid === pid) {
                        const obj =data[i]
                        temp = this.parseZone(data, data[i].ZoneID)
                        if (temp.length > 0) {
                            obj.children = temp
                        }
                        result.push(obj)
                    }
                }
                return result
            },
            //判断子区域之和是否大于父区域
            judgeSum(data,pid){
                let flag = true;
                for ( let item  of data){
                    if (item.ZoneID == pid){

                        if (this.dateMod=='month'){
                            for(let i = 1; i<32;i++){
                                let arr =0;
                                for (let temp of item.children){
                                    arr +=temp['V'+i]==null?0:parseInt(temp['V'+i])
                                }
                                if(item['V'+i] < arr)
                                    return  flag = false;
                            }
                            return  flag = true;
                        }else {
                            for(let i = 1; i<13;i++){
                                let arr =0;
                                for (let temp of item.children){
                                    arr +=temp['V'+i]==null?0:parseInt(temp['V'+i])
                                }
                                if(item['V'+i] < arr)
                                    return  flag = false;
                            }
                            return  flag = true;
                        }

                    }else {
                        this.judgeSum(item.children,pid)
                    }
                }
            },
            // 判断子区域是否全部为 空。不为空不许清空父区域
            judgeChild(data,pid){
                let flag = true;
                for (let item of data){
                    if (item.ZoneID == pid){
                        if (!item.children){
                            return flag = true;
                        }else {
                            if (this.dateMod=='month'){
                                for(let i = 1; i<32;i++){

                                    for (let temp of item.children){
                                        if (temp['V'+i] !=null){
                                            return  flag = false;
                                        }
                                    }
                                }
                                return  flag = true;
                            }else {
                                for(let i = 1; i<13;i++){
                                    for (let temp of item.children){
                                        if (temp['V'+i] !=null){
                                            return  flag = false;
                                        }
                                    }
                                }
                                return  flag = true;
                            }
                        }


                    }else {
                        if (!item.children){
                            return flag = true;
                        }
                        this.judgeChild (item.children,pid)
                    }
                }
                return flag;
            }
        },
        created:function () {
            this.dateMod = HttpUtil.getQueryString('dateMod');
            if (  this.dateMod =='month'){
                this.dateMod = 'month';
                this.dateFormat = 'yyyy-MM';
                this.day= TimeUtil.convertToString(new Date()).substr(0,7)
                for(var i = 1; i<32;i++){
                    this.master_user.columns.push({
                        field:"V"+i,
                        title:i+'日'
                    })
                }
            }else {
                this.dateMod = 'year';
                this.dateFormat = 'yyyy';
                this.day= TimeUtil.convertToString(new Date()).substr(0,4)
                for(var i = 1; i<13;i++){
                    this.master_user.columns.push({
                        field:"V"+i,
                        title:i+'月'
                    })
                }
            }
        },
        mounted(){
            this.tooltip= true;
        }
    });
</script>
</body>

</html>
